import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { useParams } from 'react-router-dom'
import { Descriptions } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'
import moment from 'moment'
import './newsAdd.css'

export default function NewsPreview(props) {
  let params = useParams()
  const [newsDetail, setNewsDetail] = useState({})

  const auditList = ['未审核', '审核中', '已通过', '未通过']
  const publishList = ['未发布', '待发布', '已上线', '已下线']

  useEffect(() => {
    axios
      .get(`/news/${params.id}?_expand=category&_expand=role`)
      .then((res) => {
        setNewsDetail(res.data)
      })
  }, [])

  return (
    <div>
      <h2>
        <ArrowLeftOutlined
          className="backIcon"
          onClick={() => window.history.back()}
        />
        <span className="backTitle">{newsDetail.title}</span>
      </h2>

      <Descriptions size="small" column={3}>
        <Descriptions.Item label="创建者">
          {newsDetail.author}
        </Descriptions.Item>
        <Descriptions.Item label="创建时间">
          {moment(newsDetail.createTime).format('YYYY/MM/DD HH:mm:ss')}
        </Descriptions.Item>
        <Descriptions.Item label="发布时间">
          {newsDetail.publishTime
            ? moment(newsDetail.publishTime).format('YYYY/MM/DD HH:mm:ss')
            : '-'}
        </Descriptions.Item>
        <Descriptions.Item label="区域">{newsDetail.region}</Descriptions.Item>
        <Descriptions.Item label="审核状态">
          <span style={{ color: 'red' }}>
            {auditList[newsDetail.auditState]}
          </span>
        </Descriptions.Item>
        <Descriptions.Item label="发布状态">
          <span style={{ color: 'red' }}>
            {publishList[newsDetail.publishState]}
          </span>
        </Descriptions.Item>
        <Descriptions.Item label="访问数量">
          {newsDetail.view}
        </Descriptions.Item>
        <Descriptions.Item label="点赞数量">
          {newsDetail.star}
        </Descriptions.Item>
        <Descriptions.Item label="评论数量">0</Descriptions.Item>
      </Descriptions>

      <div
        dangerouslySetInnerHTML={{
          __html: newsDetail.content,
        }}
        style={{
          margin: '0 24px',
          border: '1px solid gray',
        }}
      ></div>
    </div>
  )
}
